<template>
  <v-container>
    <v-row align="center" justify="center" class="mt-12">
      <v-img src="../assets/RadioSuccess.png" max-height="200" contain></v-img>
    </v-row>
    <div class="headline mt-4" align="center">操作成功</div>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <div class="title mt-4">
          <p>您的预约信息已经提交成功，我们将尽快安排工作人员与您取得联系。您可以点击网页左上角的导航按钮进入预约单跟踪页面，实时查看我们的处理情况。</p>
        </div>
      </v-col>
    </v-row>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card raised>
          <v-card-title>
            <h4>您的预约信息</h4>
          </v-card-title>
          <v-divider></v-divider>
          <v-list dense>
            <v-list-item>
              <v-list-item-content>预约单编号:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.id}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>组织名称:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.orgnization}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>拍摄内容:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.content}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>所需人数:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.count}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>拍摄时间:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.time}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>联系人:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.username}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>联系方式:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.phone}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>邮箱地址:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.mail}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>备注:</v-list-item-content>
              <v-list-item-content class="align-end">{{responseData.remark}}</v-list-item-content>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
    <div class="text-center">
      <v-btn class="mt-3" color="primary" @click="submit()">返回</v-btn>
    </div>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    responseData: {},
    id: 23,
    content: "拍摄姜泽楷",
    orgnization: "杭州电子科技大学",
    username: "姚懿",
    phone: "15382355341",
    time: "14:00",
    count: 1,
    mail: "269294523@qq.com",
    date: "2019-12-1"
  }),
  mounted: function() {
    this.responseData = this.$route.query.data;
  },
  methods: {
    submit: function() {
      var that = this;
      that.$router.push({ path: "/" });
    }
  }
};
</script>